<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "人事合规"
  },
  // 暂时需要登录，后续再改
  "needLogin": true
}
</route>

<script lang="ts" setup>
import uCharts from '@qiun/ucharts'
import { nextTick, onMounted, ref } from 'vue'
import SemicircleProgress from '../components/SemicircleProgress.vue'

// 数据定义
const companyInfo = {
  name: '浙江法保合规信息技术有限公司',
  role: '管理员',
  pendingTasks: 3,
}

const staffStats = {
  totalEmployees: 8,
  fullTimeEmployees: 8,
  partTimeEmployees: 8,
}

const complianceInfo = ref({
  score: 90,
  pendingItems: 2,
  riskData: [
    { type: '入职风险', color: '#FF8F54' },
    { type: '在职风险', color: '#50A7FC' },
    { type: '离职风险', color: '#ACB5FF' },
  ],
})

// 图表配置
const chartWidth = ref(300)
const chartHeight = ref(250)
let chartInstance = null

// 饼图数据
const chartData = {
  series: [
    {
      name: '合规占比',
      data: [
        { name: '入职风险', value: 80.87 },
        { name: '在职风险', value: 9.10 },
        { name: '离职风险', value: 10.03 },
      ],
    },
  ],
}

// 图表配置选项
const chartOpts = {
  type: 'ring',
  width: chartWidth.value,
  height: chartHeight.value,
  dataLabel: true,
  dataPointShape: false,
  padding: [5, 5, 5, 5],
  animation: true,
  background: '#FFFFFF',
  color: ['#45A8FB', '#919DFF', '#FFC4A6', '#84A1FF', '#BAC2FF', '#FF7B36'],
  legend: {
    show: false,
  },
  subtitle: {},
  extra: {
    ring: {
      ringWidth: 40,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: true,
      borderWidth: 2,
      borderColor: '#FFFFFF',
      linearType: 'custom',
    },
  },
}

// 初始化饼图
function initChart() {
  nextTick(() => {
    const canvasContext = uni.createCanvasContext('pieChart')
    chartInstance = new uCharts({
      context: canvasContext,
      ...chartOpts,
      series: chartData.series,
    })
  })
}

onMounted(() => {
  nextTick(() => {
    initChart()
  })
})
</script>

<template>
  <view class="min-h-100vh bg-#f4f4f4 px-4 pb-6">
    <!-- 公司信息卡片 -->
    <view
      class="mb-4 rounded-lg p-4"
      style="background: linear-gradient(280.67deg, #FFFFFF 7.49%, #FFF6F6 92.51%);"
    >
      <view class="flex items-center justify-between">
        <view class="w-50 flex">
          <view class="mr-3">
            <image class="h-108rpx w-108rpx" src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/avatar.png" mode="aspectFill" :lazy-load="true" />
          </view>
          <view>
            <view class="text-sm font-bold">
              {{ companyInfo.name }}
            </view>
            <view class="flex items-center text-sm text-gray-500">
              <image
                src="../static-assets/vector.svg"
                mode="scaleToFill"
                class="mr-4rpx h-25rpx w-24rpx"
              />
              <view>{{ companyInfo.role }}</view>
            </view>
          </view>
        </view>
        <view class="rounded-3xl bg-[#DF2023] px-4 py-2 text-sm text-white">
          待办{{ companyInfo.pendingTasks }}条 >
        </view>
      </view>
    </view>

    <!-- 员工统计卡片 -->
    <view class="rounded-lg">
      <view class="grid grid-cols-3 gap-10rpx">
        <view class="relative h-102rpx overflow-hidden rounded-12rpx px-10rpx py-20rpx">
          <image src="../static-assets/circle/cj_ser_2.png" mode="aspectFill" class="absolute inset-0 h-full w-full" :lazy-load="true" />
          <view class="relative z-10">
            <view class="text-sm">员工总数(人)</view>
            <view class="flex items-baseline">
              <view class="mt-1 text-2xl font-bold">{{ staffStats.totalEmployees }}</view>
              <view class="text-sm">/人</view>
            </view>
          </view>
        </view>
        <view class="relative h-102rpx overflow-hidden rounded-12rpx px-10rpx py-20rpx">
          <image src="../static-assets/circle/cj_ser_1.png" mode="aspectFill" class="absolute inset-0 h-full w-full" :lazy-load="true" />
          <view class="relative z-10">
            <view class="text-sm">全职(人)</view>
            <view class="flex items-baseline">
              <view class="mt-1 text-2xl font-bold">{{ staffStats.fullTimeEmployees }}</view>
              <view class="text-sm">/人</view>
            </view>
          </view>
        </view>
        <view class="relative h-102rpx overflow-hidden rounded-12rpx px-10rpx py-20rpx">
          <image src="../static-assets/circle/cj_ser_3.png" mode="aspectFill" class="absolute inset-0 h-full w-full" :lazy-load="true" />
          <view class="relative z-10">
            <view class="text-sm">非全职(人)</view>
            <view class="flex items-baseline">
              <view class="mt-1 text-2xl font-bold">{{ staffStats.partTimeEmployees }}</view>
              <view class="text-sm">/人</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 合规评分卡片 - 使用自定义半圆进度条组件 -->
    <view class="mt-4 rounded-lg bg-white p-4">
      <view class="flex items-center">
        <view class="mr-10rpx h-24rpx w-7rpx rounded-12rpx bg-red-500"></view>
        <text class="text-lg font-bold">用工合规</text>
      </view>

      <!-- 半圆进度条组件 -->
      <view class="relative">
        <SemicircleProgress
          :value="complianceInfo.score"
        />
      </view>
    </view>

    <!-- 合规占比图表 -->
    <view class="mt-4 rounded-lg bg-white p-4">
      <view class="flex items-center">
        <view class="mr-10rpx h-24rpx w-7rpx rounded-12rpx bg-red-500"></view>
        <text class="text-lg font-bold">用工合规</text>
      </view>
      <view class="chart-container" style="width: 100%; height: 250px; display: flex; justify-content: center;">
        <canvas
          canvas-id="pieChart"
          :style="{ width: `${chartWidth}px`, height: `${chartHeight}px` }"
        />
      </view>

      <view class="manual-legend mt-4 flex justify-center">
        <view v-for="(item, index) in complianceInfo.riskData" :key="index" class="mx-2 flex items-center">
          <view class="mr-2 h-3 w-3 rounded-full" :style="{ backgroundColor: item.color }" />
          <text class="text-xs">
            {{ item.type }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.manual-legend {
  margin-top: 15rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
</style>
